<template>
  <div id="rose-chart">
    <div class="cc-main-container">
      <div class="bc-chart-item">
        <div class="cc-header">
          <dv-decoration-1 style="width:200px;height:50px;" />
          <div>实验色系分布</div>
          <dv-decoration-1 style="width:200px;height:50px;" />
        </div>
        <div class="cc-details"/>
        <dv-charts class="right" :option="option1" />
      </div>
      <dv-decoration-2 class="decoration-1" :reverse="true" style="width:5px;" />
      <div class="bc-chart-item">
        <div class="cc-header">
          <dv-decoration-1 style="width:200px;height:50px;" />
          <div>实验合格分布</div>
          <dv-decoration-1 style="width:200px;height:50px;" />
        </div>
        <div class="cc-details">
          <div>总实验数</div>
          <div class="card">{{ total }}</div>
          <div>合格数</div>
          <div class="card">{{ countAcceptableY }}</div>
          <div>不合格数</div>
          <div class="card">{{ countAcceptableN }}</div>
          <div>未检测数</div>
          <div class="card">{{ countAcceptableU }}</div>
        </div>
        <dv-charts class="right" :option="option" />
        <LabelTag :config="labelConfig" />
      </div>

      <dv-decoration-2 class="decoration-1" :reverse="true" style="width:5px;" />
      <div class="bc-chart-item">
        <div class="cc-header">
          <dv-decoration-1 style="width:200px;height:50px;" />
          <div>实验配方分布</div>
          <dv-decoration-1 style="width:200px;height:50px;" />
        </div>
        <div class="cc-details"/>
        <dv-charts class="right" :option="option2" />
      </div>
    </div>

<!--      <dv-charts :option="option" />-->



  </div>
</template>

<script>
import LabelTag from './LabelTag'
import {listExperimentDatasView,selectColorschemeName,selectRecieptname} from "@/api/ruoyiyinzheng/experimentDatasView";
import {listColorScheme} from "@/api/ruoyiyinzheng/colorScheme";
import { listRecieptName } from "@/api/ruoyiyinzheng/recieptName";
import {listRecipesRequest} from "@/api/ruoyiyinzheng/experimentRequest";

export default {
  name: 'RoseChart',
  components: {
    LabelTag
  },
  data () {
    return {
      colorSchemeNameDatas:[],
      recieptNameDatas:[],
      option: {},
      option1 :{},
      option2 :{},
      colorSchemeList:[],
      recieptNameList:[],
      experimentDatasViewList:[],
      total:0,
      countAcceptableY:0,
      countAcceptableN:0,
      countAcceptableU:0,
      labelConfig: {
        data: [ '合格数', '不合格数', '未检测数']
      },

    }
  },
  methods: {
    getList()
    {
      listExperimentDatasView().then(response => {
        this.experimentDatasViewList = response.rows;
        this.total = response.total;
      });
    },
    getlistColorSchemeList()
    {listColorScheme().then(response => {
      this.colorSchemeList =  response.rows.map(item => ({
        colorScheme_id: item.id,
        name: item.colorSchemeName,
      }));
    });
    },
    getlistRecieptNameList()
    {
      listRecieptName().then(response => {
        this.recieptNameList =  response.rows.map(item => ({
          recieptName_id: item.id,
          name: item.stReceiptName,
        }));
      })},
    createData () {

      console.log('createdate');
      this.getList();
      this.getlistColorSchemeList();
      this.getlistRecieptNameList();


      if (this.colorSchemeList.length!=0)
      {
        this.colorSchemeNameDatas=[];
        let promises = [];
        for (let i = 0; i < this.colorSchemeList.length; i++) {
          let promise = selectColorschemeName(this.colorSchemeList[i].name);

          promises.push(promise);
        }

        Promise.all(promises).then(results => {
          for(let i = 0; i < results.length; i++) {
            let colorSchemeList = parseInt(results[i].msg);
            this.colorSchemeNameDatas.push({name: this.colorSchemeList[i].name,value: colorSchemeList})
          }

          if (this.colorSchemeNameDatas.length != 0){
            this.option1 = {
              series: [
                {
                  type: 'pie',
                  data: this.colorSchemeNameDatas.map((data) => ({
                    name: data.name,
                    value: data.value,
                  })),
                  // data: [this.datas],
                  radius: ['45%', '65%'],
                  insideLabel: {
                    show: false
                  },
                  outsideLabel: {
                    labelLineEndLength: 10,
                    formatter: '{percent}%\n{name}\n{value}个',
                    style: {
                      fontSize: 14,
                      fill: '#fff'
                    }
                  }
                }
              ],
              color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
            }
            this.option1 = {...this.option1}
          }
        });

        }

      if (this.recieptNameList.length!=0)
      {
        this.recieptNameDatas=[];
        let promises = [];

        for (let i = 0; i < this.recieptNameList.length; i++) {
          let promise = selectRecieptname(this.recieptNameList[i].name);
          promises.push(promise);
        }

        Promise.all(promises).then(results => {
          console.log(results);
          for(let i = 0; i < results.length; i++) {
            let recieptList = parseInt(results[i].msg);
            this.recieptNameDatas.push({name: this.recieptNameList[i].name,value: recieptList})
            console.log(this.recieptNameList[i].name);
          }

          if (this.recieptNameDatas.length != 0){
            this.option2 = {
              series: [
                {
                  type: 'pie',
                  data: this.recieptNameDatas.map((data) => ({
                    name: data.name,
                    value: data.value,
                  })),
                  radius: ['45%', '65%'],
                  insideLabel: {
                    show: false
                  },
                  outsideLabel: {
                    labelLineEndLength: 10,
                    formatter: '{percent}%\n{name}\n{value}个',
                    style: {
                      fontSize: 14,
                      fill: '#fff'
                    }
                  }
                }
              ],
              color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
            }
            this.option2 = {...this.option2}
          }
        });

      }





      this.countAcceptableY=0;
      this.countAcceptableN=0;
      this.countAcceptableU=0;
      this.experimentDatasViewList.map(data => {
        if (data.acceptable === 'Y') {
          this.countAcceptableY++;
        } else if (data.acceptable === 'N') {
          this.countAcceptableN++;
        }
        else {
          this.countAcceptableU++;
        }
      });

      if (this.countAcceptableY!=0||this.countAcceptableN!=0||this.countAcceptableU!=0) {
        this.option= {
          series: [
            {
              type: 'pie',
              data: [
                { name: '合格数', value: this.countAcceptableY },
                { name: '不合格数', value: this.countAcceptableN },
                { name: '未检测数', value: this.countAcceptableU },
              ],
              radius: ['45%', '65%'],
              insideLabel: {
                show: false
              },
              outsideLabel: {
                labelLineEndLength: 10,
                formatter: '{percent}%\n{name}',
                style: {
                  fontSize: 14,
                  fill: '#fff'
                }
              }
            }
          ],
          color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
        }

        this.option = {...this.option}
      }


    },
  },
  mounted () {
    this.createData(); // 立即执行一次 createData()

    setInterval(() => {
      this.createData(); // 每 3 秒执行一次 createData()
    }, 3000);
  }
}
</script>

<style lang="less">
#rose-chart {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, .5);
  box-sizing: border-box;
  .cc-main-container {
    position: relative;
    flex: 1;
    display: flex;
    .bc-chart-item {
      width: 33%;
      height: 200px;
      padding-top: 20px;
      box-sizing: border-box;
      .cc-header {
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 30px;
      }
      .cc-details {
        height: 60px;
        display: flex;
        justify-content: center;
        font-size: 16px;
        align-items: center;

        .card {
          background-color: rgba(4,49,128,.6);
          color: #08e5ff;
          height: 35px;
          width: 35px;
          font-size: 22px;
          font-weight: bold;
          line-height: 35px;
          text-align: center;
          margin: 10px;
        }
      }

      //.right {
      //  display: flex;
      //  justify-content: center;
      //  align-items: center;
      //  padding-bottom: 20px;
      //  box-sizing: border-box;
      //}
    }

    }

  }





</style>
